Background JQuery

Hace unas semanas en Pizcos Blogs vi un efecto de Background muy llamativo, está creado con JQuery y el autor es You Love Us.

Como bien señala Pizcos lo principal es entender la forma de añadir la imagen considerando que el tamaño (ancho) de la imagen debe ser igual a nuestro blog es decir debe tener la misma medida ancho) el largo no es tan importante aunque debemos considerar que debe tener más altura que nuestro header de lo contrario el efecto pierde su encanto.

Buscaremos una imagen que mida lo mismo de ancho, en las páginas de Wallpapers encontraremos un gran surtido que podemos adecuar de tamaño con algún editor de imágenes.

El siguiente paso que nos recomienda Pizcos sería añadir a la plantilla la librería JQuery y copiar el plugin en el bloc de notas que lo guardaremos como jquery.backgroundPosition.js o jquery.backgroundPosition.txt. para subirlo más tarde a un alojamiento y añadirlos en la plantilla justo antes de </body>

Ahora bien, yo he optado por mostrar la imagen únicamente en el header(cabecera) de nuestro blog, para ello la imagen debe medir de ancho lo mismo que nuestra cabecera "header-wrapper" y añadir todo el código en la plantilla para evitar así alojamientos externos.

¿Vemos cómo hacerlo?
He añadido justo antes de </head> lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
//]]>
</script>

<script type='text/javascript'>
$(function() {


var backgroundheight = 750;
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 60 / 24 * 100;
var percentofday = hourpercent + minutepercent;
var startoffset = backgroundheight / 100 * percentofday;
var endoffset = startoffset + backgroundheight;

function scrollbackground() {
$(&#39;body&#39;).css({
backgroundPosition: &#39;50% -&#39; + startoffset + &#39;px&#39;
});
$(&#39;body&#39;).animate({
backgroundPosition:&#39;(50% &#39; + endoffset + &#39;px)&#39;
},
100000,
&quot;linear&quot;,
function () {
scrollbackground();
}
);
}

scrollbackground();
}
);
</script>

Como veréis he marcado en color rojo el ancho de la imagen que mide 750px × 600px y es el mismo ancho de header-wrapper.

Nos queda añadir la imagen, buscamos los estilos de body y la añadimos de la siguiente forma:

background: #000 url(url-de-la-imagen) repeat-y;

• El color negro ( #000) es el color que se muestra al cargar la página.

• Con repeat-y estamos diciendo que la imagen se repita en vertical.

• Si deseamos dar más altura a la cabecera para que la imagen quede más vistosa añadimos height: 220px; o una cantidad similar en header-wrapper.

Y eso es todo, el ejemplo haciendo click sobre la imagen.